<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';

const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '数据报表'
  },
  data: {
    type: Array,
    default() {
      // [   // 数据中有几个对象，对象中的长度就需要有几个，长度需要保持一致
      //
      //   {
      //     name:'pv',
      //     data:[11,22]  //  这里的数据长度需要保持一致
      //   },
      //   {
      //     name:'uv',
      //     data:[11,22]
      //   }
      // ]

      return [];
    }
  },
  x: {
    type: Array,
    default() {
      return [];
    }
  },
  ...basicProps
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

onMounted(() => {
  let series = [];
  let names = [];
  if (props.data) {
    for (let i in props.data) {
      let name = props.data[i]['name'];
      let data = props.data[i]['data'];
      if (name === undefined || data === undefined) {
        continue;
      }
      names.push(name);
      series.push({
        name: name,
        smooth: true,
        data: data,
        type: 'line',
        areaStyle: {}
      });
    }
  }
  setOptions({
    title: {
      text: props.title
    },
    legend: {
      data: names
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.x,
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid',
          color: 'rgba(226,226,226,0.5)'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: 'value',
        // splitNumber: 4,
        axisTick: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)']
          }
        }
      }
    ],
    grid: { left: '1%', right: '1%', top: '15%', bottom: 0, containLabel: true },
    series: series
  });
});
</script>
